<!DOCTYPE html>
<html>
    <head>
        <title>Batch Global</title>
        <meta charset="UTF-8">   
        <style>
            html, body {
                padding: 0px;
                margin: 0px;                
            }            
            .main {
                margin: 0px;
                padding: 0px;
                position: absolute;
                top: 0px;
                bottom: 0px;
                left: 0px;
                right: 0px;
                background: #426AA1;
            }
        </style>                          

        <script src="../../../../lib/core/ht.js"></script>         

        <script>
            
            ht.Default.setImage('ben', '');
            
            function init() {
                items = [
                    {
                        label: 'Batch',
                        type: 'check',
                        selected: true,
                        action: function() {
                            switchBatch();
                        }
                    },
                    {
                        id: 'batchUvScale',
                        label: 'UvScale',
                        type: 'check',
                        action: function() {
                            updateBatch();
                        }
                    },  
                    {
                        id: 'batchLight',
                        label: 'Light',
                        type: 'check',
                        selected: true,
                        action: function() {
                            updateBatch();
                        }
                    },           
                    {
                        id: 'batchBrightness',
                        label: 'Brightness',
                        type: 'check',
                        action: function() {
                            updateBatch();
                        }
                    },
                    {
                        id: 'batchBlend',
                        label: 'Blend',
                        type: 'check',
                        action: function() {
                            updateBatch();
                        }
                    },
                    {
                        id: 'batchReverseFlip',
                        label: 'ReverseFlip',
                        type: 'check',
                        action: function() {
                            updateBatch();
                        }
                    },
                    {
                        id: 'batchReverseCull',
                        label: 'ReverseCull',
                        type: 'check',
                        action: function() {
                            updateBatch();
                        }
                    },
                    {
                        id: 'batchTransparentMask',
                        label: 'TransparentMask',
                        type: 'check',
                        action: function() {
                            updateBatch();
                        }
                    }        
                ];

                toolbar = new ht.widget.Toolbar(items);
                dataModel = new ht.DataModel();

                g3d = new ht.graph3d.Graph3dView(dataModel);
                g3d.setGridVisible(true);
                g3d.setGridColor('#74AADA');
                g3d.setGridSize(100);
                g3d.setEye(0, 800, 2000);
                g3d.setFar(20000);

                borderPane = new ht.widget.BorderPane();
                borderPane.setTopView(toolbar);
                borderPane.setCenterView(g3d);

                view = borderPane.getView();
                view.className = 'main';
                document.body.appendChild(view);
                window.addEventListener('resize', function(e) {
                    borderPane.invalidate();
                }, false);

                updateBatch();

                var column = 40,
                        row = 40,
                        gap = 100,
                        startX = -column * gap / 2 + gap / 2,
                        startZ = row * gap / 2 - gap / 2,
                        size = gap * 0.55;

                for (var i = 0; i < row; i++) {
                    for (var j = 0; j < column; j++) {
                        createNode(startX + gap * j, startZ, size).s({
                            'batch': 'faceBatch',                                                     
                            'all.blend': '#00FFFF',
                            'top.visible': i % 2 === 0,
                            'front.uv.scale': [2, 2]
                        });
                    }
                    startZ -= gap;
                }


                var types = ['box', 'sphere', 'cylinder', 'cone', 'torus', 'star', 'rect', 'roundRect',
                    'triangle', 'rightTriangle', 'parallelogram', 'trapezoid'];
                for(var i=0; i<types.length; i++){                     
                    var node = createNode(-types.length*gap+gap+gap*i*2, 0, gap*1.5);
                    node.s({
                        'batch': 'shapeBatch',
                        'shape3d': types[i],
                        'shape3d.blend': '#00FFFF',
                        'shape3d.top.visible': false
                    });
                    node.setElevation(gap * 2);
                };

            }

            function updateBatch() {
                var brightness = toolbar.v('batchBrightness');
                var blend = toolbar.v('batchBlend');
                var reverseCull = toolbar.v('batchReverseCull');
                var reverseFlip = toolbar.v('batchReverseFlip');
                var light = toolbar.v('batchLight'); 
                var uvScale = toolbar.v('batchUvScale');                 
                var transparentMask = toolbar.v('batchTransparentMask'); 
                                
                ht.Default.setBatchInfo('shapeBatch', {                    
                    brightness: brightness,
                    transparentMask: transparentMask,
                    blend: blend,
                    image: 'ben',
                    reverseColor: 'green',
                    reverseCull: reverseCull,
                    reverseFlip: reverseFlip,
                    light: light,
                    uvScale: uvScale ? [12, 4] : null
                });                                                                
                ht.Default.setBatchInfo('faceBatch', {
                    brightness: brightness,
                    transparentMask: transparentMask,
                    blend: blend,
                    image: 'ben',                    
                    reverseColor: 'yellow',
                    reverseCull: reverseCull,
                    reverseFlip: reverseFlip,
                    topUvScale: [2, 2],
                    light: light,                  
                    uvScale: uvScale ? [1.5, 1.5] : null
                });    
                g3d.setBatchBlendDisabled(!blend);
                g3d.setBatchBrightnessDisabled(!brightness);
                g3d.invalidateBatch('shapeBatch');
                g3d.invalidateBatch('faceBatch');                
            }

            function createNode(x, z, size) {
                var node = new ht.Node();
                node.s3(size, size, size);
                node.p3(x, size / 2, z);
                dataModel.add(node);
                return node;
            }

            function switchBatch() {
                g3d.invalidateBatch('shapeBatch');
                g3d.invalidateBatch('faceBatch'); 
                dataModel.each(function(node) {
                    var batchName = node.s('batch');
                    if (batchName) {
                        node.s('batch', null);
                        node.batchName = batchName;
                    } else {
                        node.s('batch', node.batchName);
                    }
                });
            }

        </script>
    </head>
    <body onload="init();">                                  
    </body>
</html>